import React, { Component } from 'react';
import './index.less';


class CourseNav extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedIndex: props.selectedIndex
        }
    }
    clikcItem(index) {
        this.setState({selectedIndex: index})
    }
    render() {
        const { selectedIndex } = this.state;
        const courses = [
            { title: '全部课程' },
            { title: '已结束课程' },
        ]
        return (
            <ul className="course-switch clearfix">
                {
                    courses.map((item, index) => {
                        const className = index === selectedIndex ? 'selected' : '';
                        return <li className={className}
                                   onClick={() => this.clikcItem(index)}>
                                   {item.title}
                                </li>
                    })
                }
            </ul>
        );
    }
}

export default CourseNav;